<template>
	<div>
   <BookInfo :info='info'></BookInfo>
   <CommentList :comments='comments'></CommentList>
   <div class="comment" v-if="showAdd">
     <textarea 
       v-model='comment'
       class="textarea"
       :maxlength='100'
       placeholder="请输入图书短评">
     </textarea>
     <div class="location">
      地理位置:
      <switch color='#EA5A69' @change="getGeo" :checked="location"></switch>
      <span class="text-primary">{{location}}</span>
     </div>

     <div class="phone">
      手机号:
      <switch color='#EA5A69' @change="getPhone" :checked="phone"></switch>
       <span class="text-primary">{{phone}}</span>
     </div>
     <button class='btn' @click='addComment'>评论</button>
   </div>
   <div v-else class="text-footer">
     无法评论(未登录或者已经评论过了)
   </div>
   <button  open-type="share" class="btn">转发给好友</button>
  </div>
</template>

<script>
import {get, post, showModal} from '@/util'
import BookInfo from '@/components/BookInfo'
import CommentList from '@/components/CommentList'
export default {
  data () {
  	return {
      comments: [],
      bookid: '',
      info: {},
      comment: '',
      location: '',
      phone: '',
      userinfo: {}
  	}
  },
  computed: {
    showAdd () {
      // 未登录
      if (!this.userinfo.openId) {
        return false
      }
      // 评论列表查到有自己的openid
      if (this.comments.filter(v => v.openid == this.userinfo.openId).length) {
        return false
      }
      return true
    }
  },
  components: {
    BookInfo,
    CommentList
  },
  methods: {
    async getDetail () {
      const info = await get('/weapp/bookdetail', {id: this.bookid})
      wx.setNavigationBarTitle({
        title: info.title
      })
      this.info = info
    },
    async getComments () {
      const comments = await get('/weapp/commentlist', {bookid: this.bookid})
      this.comments = comments.list || []
    },
    getGeo (e) {
      //  8G0oQCVhpXvUpcT3s5s7Ojhpsc7hyQKb
      //  http://api.map.baidu.com/geocoder/v2/
      const ak = '8G0oQCVhpXvUpcT3s5s7Ojhpsc7hyQKb'
      const url = 'http://api.map.baidu.com/geocoder/v2/'

      if (e.target.value) {
        wx.getLocation({
          success: geo => {
            wx.request({
              url,
              data: {
                ak,
                location: `${geo.latitude}, ${geo.longitude}`,
                output: 'json'
              },
              success: res => {
                if (res.data.status == 0) {
                  this.location = res.data.result.addressComponent.city
                } else {
                  this.location = '未知地点'
                }
              }
            })
          }
        })
      } else {
        this.location = ''
      }
    },
    getPhone (e) {
      if (e.target.value) {
        const phoneInfo = wx.getSystemInfoSync()
        this.phone = phoneInfo.model
      } else {
        // 没选中
        this.phone = ''
      }
    },
    async addComment () {
      if (!this.comment) {
        return
      }
      // 评论内容，手机类型，地理位置， 图书id， 用户openid
      const data = {
        openid: this.userinfo.openId,
        bookid: this.bookid,
        comment: this.comment,
        phone: this.phone,
        location: this.location
      }
      try {
        await post('/weapp/addcomment', data)
        this.comment = ''
        this.getComments()
      } catch (e) {
        showModel('失败', e.msg)
      }
    }
  },
  mounted () {
  	this.bookid = this.$root.$mp.query.id
  	this.getDetail()
    this.getComments()
    const userinfo = wx.getStorageSync('userinfo')
    if (userinfo) {
      this.userinfo = userinfo
    }
  }

}
</script>

<style lang="scss">
.btn {
    color: white;
    background: #EA5A49;
    margin-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 2px;
    line-height: 40px;
    height: 40px;
    width: 100%;
}
.text-footer {
  text-align: center;
  font-size: 12px;
  margin-bottom: 5px;
  background: #eee
}
.comment {
  margin-top: 10px;
  .textarea {
  width: 730rpx;
  height: 200rpx;
  background: #eee;
  padding: 10px;
  }
  .location {
   margin-top: 10px;
   padding: 5px 10px;
  }
  .phone {
    margin-top :10px;
    padding: 5px 10px;
  }
  .btn {
    color: white;
    background: #EA5A49;
    margin-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 2px;
    line-height: 40px;
    height: 40px;
    width: 100%;
}
}

</style>